<ion-header>
  <ion-navbar>
    <div *ngIf="!isLogin">
      <ion-row>
        <ion-col class="person-info-page" style="padding-top: 0.5rem!important;text-align: right;">
          <button ion-button icon-right clear small class="qrscan" (click)="gotoScan()" >
            <ion-icon ios="ios-qr-scanner" md="md-qr-scanner"></ion-icon>
            <span style="margin-left: 0.4rem;">扫码</span>
          </button>
          <button ion-button icon-right clear small (click)="settingCLI()">
            <img src="assets/img/Comment/setting.png" alt="">
          </button>

          <button ion-button icon-right clear small class="bell" (click)="gotomsg()">
            <img src="assets/img/Comment/message.png" alt="">
            <span class="msg">{{reading.length}}</span>
          </button>
        </ion-col>
      </ion-row>

      <ion-item class="clearfix mt">
          <!-- <ion-avatar item-start (click)="getmyInfo()" > -->
        <ion-avatar item-start  (click)="openModal(event,picture);$event.stopPropagation()">
          <img  src="{{loadPic}}{{picture}}" />
        </ion-avatar>
        <div class="banner-person-left">
          <h2 class="person-detail-margin" (click)='gojoin()'>{{nickname}}</h2>

          <p class="person-detail-margin person-yue" (click)="gotoBalance()">{{myBalance}}</p>
        </div>
        <div class="banner-person-right">
          <button ion-button color="light" (click)="personalCLI()" style="width: auto">
            <span class="mypersonmsg">
              个人资料>>
            </span>
          </button>
        </div>
      </ion-item>
      <p></p>
    </div>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <div *ngIf="!isLogin">
    <div style="width:100%;height:14rem;background:#ff5d5d"></div>
    <ion-grid class="person_bg">
      <ion-row>
        <ion-col col-4>
          <ion-item id="chartContainer" class="border-dianzan" (click)="collectionCLI()">
            <p class='person-gouwu-detail' style="color:black">{{user.collect_count}}</p>
            <p class='person-gouwu-detail'>收藏</p>
          </ion-item>
        </ion-col>
        <ion-col col-4>
          <ion-item class="border-dianzan" (click)="followCLI()">
            <p class='person-gouwu-detail' style="color:black">{{user.focus_count}}</p>
            <p class='person-gouwu-detail'>关注</p>
          </ion-item>
        </ion-col>
        <ion-col col-4>
          <ion-item (click)="myzanCLI()">
            <p class='person-gouwu-detail' style="color:black">{{number}}</p>
            <p class='person-gouwu-detail'>粉丝</p>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>




    <!--没有认证的美甲师-->
    <div>
      <ion-grid class="person_bg_two">
        <ion-row>
          <!-- <ion-col col-6 *ngIf="nailLevel==2||this.shopLevel==3"> -->
          <ion-col col-6 *ngIf="noneLevel==1" >
            <div class="isNailPass">
              <ion-item class="person_bg1" (click)='nailauthCLI()'>
                <ion-thumbnail item-start>
                  <img src="assets/img/renzheng.png">
                </ion-thumbnail>
                <p>认证美甲师</p>
              </ion-item>
              <div class="NailPassing" *ngIf="isNailPassing" (click)="alertTip()">
                <p>审核中</p>
              </div>
          </div>
          </ion-col>
          <ion-col col-6 *ngIf="nailLevel==2">
            <div class="isNailPass">
              <ion-item class="renzheng1" (click)="toNail()">
                <ion-thumbnail item-start>
                  <img src="assets/img/meijiashire@2x.png">
                </ion-thumbnail>
                <p>
                  <span *ngIf="userData.artist_level == 1 || userData.artist_level == -1">初级美甲师</span>
                  <span *ngIf="userData.artist_level == 2">中级美甲师</span>
                  <span *ngIf="userData.artist_level == 3">高级美甲师</span>
                </p>
              </ion-item>
            </div>
          </ion-col>

          <ion-col col-6 *ngIf="shopLevel==3">
            <!-- <ion-col col-6 *ngIf="shopLevel==3"> -->
            <div class="isNailPass">
              <ion-item class="person_bg2" (click)='shop()'>
                <ion-thumbnail item-start>
                  <img src="assets/img/shoprz.png">
                </ion-thumbnail>
                <p>认证美甲店</p>
              </ion-item>
              <div class="NailPassing" *ngIf="isShopPassing" (click)="alertTip()">
                  <p>审核中</p>
              </div>
            </div>
          </ion-col>

          <ion-col col-6 *ngIf="shopLevel==4">
            <div class="isNailPass">
              <ion-item class="renzheng2" (click)="toShop()">
                <ion-thumbnail item-start>
                  <img src="assets/img/meijiadianre@2x.png">
                </ion-thumbnail>
                <p>我的美甲店</p>
              </ion-item>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>

    <!--消费者-->
    <div *ngIf="nothing==1">
      <ion-grid class="person_bg_three cus">
        <ion-col col-12 class="mybordert">
          <ion-list style="width: 100%;padding-left: 1rem">
            <button ion-item (click)="consumerorderCLI(0)">
              <label class="diyItem">消费者订单</label>
              <label class="diyItemright">查看更多订单</label>
            </button>
          </ion-list>
        </ion-col>
      </ion-grid>

      <ion-grid class="person_bg_four cus">
        <ion-row class="mtc">
          <!-- <ion-col col-4>
            <ion-item class="person-gouwu" (click)="gotoBuycar()">
              <h2>
                <img src='assets/img/gouwuche.png' width="30" height="30" />
                <ion-badge item-end *ngIf="user.cart_count != 0" style="right:2.2rem;top:-0.5rem;width:2.2rem;height:1.5rem">
                  {{user.cart_count}}</ion-badge>
              </h2>
              <p>购物车</p>
            </ion-item>
          </ion-col> -->
          <ion-col col-4>
            <ion-item class="person-gouwu" (click)="consumerorderCLI(1)">
              <h2 style="margin-top:0.3rem;">
                <img src='assets/img/daishouhuo.png' width="30" height="30" />
                <ion-badge item-end *ngIf="orderlistCount != 0">{{orderlistCount}}</ion-badge>
              </h2>
              <p>待服务</p>
            </ion-item>
          </ion-col>
          <ion-col col-4>
            <ion-item class="person-gouwu" (click)="consumerorderCLI(2)">
              <h2 style="margin-top:0.3rem;">
                <img src='assets/img/pingjia.png' width="30" height="30" />
                <ion-badge item-end *ngIf="orderlistCount2 != 0" class="badd">{{orderlistCount2}}</ion-badge>
              </h2>
              <p>待评价</p>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>

    <!--美甲师-->
    <div *ngIf="nail==2">
      <div style="background:#fff;width:100%; border-bottom:1px solid #F1F1F1;margin-bottom:0.01rem" class="row">
        <ion-col col-1 text-left style="margin: 0;padding: 0;display: flex;align-items: center;">
          <button ion-button (click)="toConsumer();$event.stopPropagation()" style="background:transparent;margin: 0;padding: 0;padding-left: 1rem;">
            <img src="assets/img/zuo3.png" style="height:1rem;width:1.3rem;margin-top: 0.4rem">
            <!-- <ion-icon ios="ios-arrow-dropleft" md="md-arrow-dropleft"></ion-icon> -->
          </button>
        </ion-col>
        <ion-col col-1 style="margin: 0;padding: 0;">
          <div text-center style="border-left:1px solid #F1F1F1;height: 80%;position: absolute;
        top: 10%;
        left: 1.5rem;">

          </div>
        </ion-col>
        <ion-col col-10 style="margin: 0;padding:0;">
          <button ion-item (click)="nailerOrderCli()">
            <label class="diyItem">美甲师订单</label>
            <label class="diyItemright">查看更多订单</label>
          </button>
        </ion-col>
      </div>

      <!-- <ion-grid class="person_bg_four">
        <ion-row>
          <ion-col col-4>
            <ion-item class="person-gouwu">
              <h2>
                <img src='assets/img/jxz.png' width="40" height="40" />
              </h2>
              <p>进行中</p>
            </ion-item>
          </ion-col>
          <ion-col col-4>
            <ion-item class="person-gouwu">
              <h2>
                <img src='assets/img/ysx.png' width="40" height="40" />
                <ion-badge item-end>9</ion-badge>
              </h2>
              <p>已失效</p>
            </ion-item>
          </ion-col>
          <ion-col col-4>
            <ion-item class="person-gouwu">
              <h2>
                <img src='assets/img/pingjia.png' width="40" height="40" />
              </h2>
              <p>待评价</p>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid> -->


      <ion-grid class="person_bg_four nailer">
        <div class="row">
          <ion-col col-12 style="margin: 0;padding: 0;">
            <button ion-item (click)="goNailPicture()">
              <label class="diyItem">我的美图美款</label>
              <label class="diyItemright"></label>
            </button>
          </ion-col>
        </div>
      </ion-grid>

      <ion-grid class="person_bg_four nailer">
        <div class="row">
          <ion-col col-12 style="margin: 0;padding: 0;">
            <button ion-item (click)="gojoin()">
              <label class="diyItem">申请加入店铺</label>
              <label class="diyItemright"></label>
            </button>
          </ion-col>
        </div>
      </ion-grid>
    </div>


    <!--美甲店-->
    <div *ngIf="showShop==3&&nothing!=1&&nail!=2">
      <!--  如果已经缴纳了保证金的 店铺 -->
      <div *ngIf='hasPayCashDeposit'>
        <div style="background:#fff;width:100%; border-bottom:1px solid #F1F1F1;" class="row">
          <ion-col col-1 text-left style="margin: 0;padding: 0;display: flex;align-items: center;">
            <button ion-button (click)="toConsumer();$event.stopPropagation()" style="background:transparent;margin: 0;padding: 0;padding-left: 1rem;">
              <img src="assets/img/zuo3.png" style="height:1rem;width:1.3rem;margin-top: 0.4rem">
              <!-- <ion-icon ios="ios-arrow-dropleft" md="md-arrow-dropleft"></ion-icon> -->
            </button>
          </ion-col>
          <ion-col col-1 style="margin: 0;padding: 0;">
            <div text-center style="border-left:1px solid #F1F1F1;height: 80%;position: absolute;
            top: 10%;
            left: 1.5rem;">

            </div>
          </ion-col>
          <ion-col col-10 style="margin: 0;padding: 0;" (click)="shoporderCLI(0)">
            <button ion-item>
              <label class="diyItem">美甲店订单</label>
              <label class="diyItemright">查看更多订单</label>
            </button>
          </ion-col>
        </div>

        <ion-grid class="person_bg_four">
          <ion-row>
            <ion-col col-4 style="margin: 0;padding: 0;" (click)="shoporderCLI(1)">
              <ion-item class="person-gouwu">
                <h2>
                  <img src='assets/img/Comment/daifuwu@2x.png' width="30" height="30" />
                </h2>
                <p>待服务</p>
              </ion-item>
            </ion-col>
            <ion-col col-4 style="margin: 0;padding: 0;" (click)="shoporderCLI(2)">
              <ion-item class="person-gouwu">
                <h2>
                  <img src='assets/img/Comment/yifuwu@2x.png' width="30" height="30" />
                </h2>
                <p>已服务</p>
              </ion-item>
            </ion-col>
            <ion-col col-4 style="margin: 0;padding: 0;" (click)="shoporderCLI(3)">
              <ion-item class="person-gouwu">
                <h2>
                  <img src='assets/img/pingjia.png' width="30" height="30" />
                </h2>
                <p>评价</p>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>

        <ion-grid class="person_bg_four last" (click)="mangershop()">
          <div class="row">
            <ion-col col-12 style="margin: 0;padding: 0;">
              <ion-list>
                <button ion-item>
                  <label class="diyItem">管理店铺</label>
                  <label class="diyItemright"></label>
                </button>
              </ion-list>
            </ion-col>
          </div>
        </ion-grid>
        <ion-grid class="person_bg_four last" (click)="toDiscountCoupon()">
          <div class="row">
            <ion-col col-12 style="margin: 0;padding: 0;">
              <ion-list>
                <button ion-item>
                  <label class="diyItem">我的优惠券</label>
                  <label class="diyItemright"></label>
                </button>
              </ion-list>
            </ion-col>
          </div>
        </ion-grid>
      </div>
      <!-- 如果是还没有缴纳保证金的店铺  -->
      <div *ngIf="!hasPayCashDeposit" class="cashDeposit">

        <div style="background:#fff;width:100%; border-bottom:1px solid #ccc;" class="row">
          <ion-col col-1 text-left style="margin: 0;padding: 0;">
            <button ion-button (click)="toConsumer();$event.stopPropagation()" style="background:transparent;margin: 0;padding: 0;padding-left: 1rem;">
              <img src="assets/img/back.png" width='15' height='20'>
              <!-- <ion-icon ios="ios-arrow-dropleft" md="md-arrow-dropleft"></ion-icon> -->
            </button>
          </ion-col>
          <ion-col col-1 style="margin: 0;padding: 0;">
            <div text-center style="border-left:1px solid #ccc;height: 60%;position: absolute;top: 20%;left: 1.5rem;">
            </div>
          </ion-col>

          <ion-col col-10 style="margin: 0;padding: 0;">
            <p class="pay-cash-title">缴纳保证金</p>
          </ion-col>
        </div>

        <ion-grid class="person_bg_four last">
          <div class="row last-row">
            <ion-col col-6 style="margin: 0;padding: 0;" text-center (click)="toPayCashDeposit(0)">
              <img src="./assets/img/shiyongyouhuijuan@2x.png" alt="">
              <span>使用优惠券</span>
            </ion-col>
            <ion-col col-6 style="margin: 0;padding: 0;" text-center (click)="toPayCashDeposit(1)">
              <img src="./assets/img/kuaijiezhifu@2x.png" alt="">
              <span>快捷支付</span>
            </ion-col>
          </div>
        </ion-grid>
        <p style='color: #b1b1b1;font-size: 1.1rem;' text-center>※保证金缴纳完毕及审核通过后开放美甲店所有功能。</p>
      </div>

    </div>
    <ion-card style="width:100%;background:transparent;border-style:none;position: fixed;bottom:0">
      <div text-center class="bottomP">
        <div class="phone">
          <img src="assets/img/Comment/phone.png" alt="">
        </div>
        <div class="allRight">
          <p>
            <a href="tel://400-010-0000" class="person_all">联系我们：400-010-0000</a>
          </p>
          <p class="person_all">工作时间：9:30-6:30</p>
        </div>

      </div>
    </ion-card>
  </div>
  <!-- <div style="margin-top:20rem;" text-center *ngIf="isLogin">
    <h2 text-center>用户尚未登录</h2>
    <button ion-button (click)="toLogin()"> 登 录 </button>
  </div> -->
</ion-content>